<template>
  <Cydl :titleName="activeName">
    <router-view />
  </Cydl>
  <!-- <div>
    <div class="harder-setbg">
      <div style="padding-top: 30px">
        <span class="harder-text1">数字经济综合应用</span>
        <span class="harder-text2">企业端</span>
      </div>

      <div class="harder-right">
        <span>XXX用户, 欢迎您!</span>
      </div>
      <div style="padding-top: 70px; position: absolute; left: centr">
        <span style="font-size: 24px; font-weight: bold; padding-right: 20px"
          >化工大脑</span
        >
        <span style="font-size: 20px">{{activeLabel}}</span>
      </div>

      <div style="padding-top: 100px; padding-left: 150px">
        <ul>
          <li style="font-size: 18px; font-weight: bold; list-style: none">
            首页
          </li>
        </ul>
      </div>
    </div> -->

  <!-- <div class="home_reserve">
    <div class="content">
      <div class="reserve_header">
        <span class="manage_title">化工大脑</span>
        <span class="current_name">能源管理</span>
      </div>
      <div class="link_home"><i class="el-icon-s-home"></i> 首页</div>

      <div class="reserve_content">
        <div class="reserve_tabs">
          <div class="man_tabs">
            <div v-for="item in tabs"
                  :key="item.componentName"
                  class="man_tabs_item"
                  @click="jumpRoute(item.componentName)"
                  v-show="!(item.show === false)"
                  :class="{'man_tabs_item_choosed': $route.name===item.componentName}">
              {{item.name}}
            </div>
          </div>
          <router-view/>
        </div>
      </div>
    </div>
  </div> -->
</template>
<script>
// import energyAll from './energyAll'
// import carbonEmission from './carbonEmission'
// import IndustryEnergy from './IndustryEnergy'
// import regionSupplyDemand from './regionSupplyDemand'
// import deviceControl from './deviceControl'
// import energyStatistical from './energyStatistical'
// import energyOperation from './energyOperation'
// import carbonEmissionStatistics from './carbonEmissionStatistics'
import Cydl from '@/components/header1'
export default {
  data () {
    return {
    //   activeName: 'zfSafetyProduction',
      activeLabel: '生产安全',
    //   activeName:localStorage.getItem('anquan')
      activeName:this.$route.meta.title
    }
  },
  components: {
    // energyAll,
    // carbonEmission,
    // IndustryEnergy,
    // regionSupplyDemand,
    // deviceControl,
    // energyStatistical,
    // energyOperation,
    // carbonEmissionStatistics
    Cydl
  },

  methods: {
    // 切换tab
    jumpRoute (name) {
      if (name) {
        this.$router.push({
          name: name
        })
      }
    },
    handleClick (tab) {
      this.activeName = tab.name
      this.activeLabel = tab.label
    }
  }
}
</script>
<style lang='scss' scoped>
// .flex-container {
//   width: 77%;
//   height: 800px;
//   /* padding: 20px; */
//   background: #f7f8fa;
//   margin-left: 10%;
//   margin-right: 10%;
//   margin-bottom: 500px;
//   margin-top: -140px;
//   border: 1px solid #f2f2f2;
// }

// .harder-setbg {
//   width: 100%;
//   height: 200px;
//   background-repeat: no-repeat;
//   background-image: url(~@/assets/img/consulting_bg.png);
//   background-size: cover;
//   color: white;
//     .reserve_header {
//       display: flex;
//       justify-content: center;
//       align-items: center;
//       color: #fff;
//       line-height: 40px;
//       .manage_title {
//         font-size: 24px;
//         font-weight: 700;
//       }
//       .current_name {
//         margin-left: 20px;
//         font-size: 18px;
//         font-weight: 400;
//       }
//     }
// }

// .harder-text1 {
//   padding-left: 30px;
//   padding-top: 30px;
//   padding-right: 10px;
//   color: white;
//   font-size: 18px;
// }

// .harder-text2 {
//   padding-left: 8px;
//   padding-right: 8px;
//   color: white;
//   font-size: 14px;
//   border: 1px solid #fff;
//   border-radius: 10px;
// }

// .harder-right {
//   float: right;
//   padding-right: 100px;
//   padding-top: -40px;
// }
// .reserve_content {
//   width: 1200px;
//   margin: 0 auto;
//   box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.15);
//   // opacity: 0.58;
//   .reserve_tabs {
//     background-color: rgba(255, 255, 255, 0.58);
//     .man_tabs {
//       // padding: 5px;
//       display: flex;
//       justify-content: left;
//       align-items: center;
//       line-height: 50px;
//       font-size: 18px;
//       border-bottom: 1px solid #fff;
//       .man_tabs_item {
//         cursor: pointer;
//         min-width: 140px;
//         padding: 0 20px;
//         text-align: center;
//         color: #1492ff;
//       }
//       .man_tabs_item_choosed {
//         min-width: 140px;
//         background-color: #1492ff;;
//         color: #fff;
//       }
//     }
//   }
// }

.home_reserve {
  background: url("../../../assets/img/lclb/u15.png") no-repeat;
  // background-size: 100% 200px;
  padding-top: 110px;
  .content {
    // width: 1200px;
    // margin: 0 auto;
    .reserve_header {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      line-height: 40px;
      .manage_title {
        font-size: 24px;
        font-weight: 700;
      }
      .current_name {
        margin-left: 20px;
        font-size: 18px;
        font-weight: 400;
      }
    }
    .link_home {
      width: 1200px;
      margin: 0 auto;
      padding: 0px 3px;
      line-height: 30px;
      color: #fff;
      font-size: 16px;
    }
    .reserve_content {
      width: 1200px;
      margin: 0 auto;
      box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.15);
      // opacity: 0.58;
      .reserve_tabs {
        background-color: rgba(255, 255, 255, 0.58);
        .man_tabs {
          // padding: 5px;
          display: flex;
          justify-content: left;
          align-items: center;
          line-height: 50px;
          font-size: 18px;
          border-bottom: 1px solid #fff;
          .man_tabs_item {
            cursor: pointer;
            min-width: 140px;
            padding: 0 20px;
            text-align: center;
            color: #1492ff;
          }
          .man_tabs_item_choosed {
            min-width: 140px;
            background-color: #1492ff;
            color: #fff;
          }
        }
      }
    }
  }
}
// .flex-container {
//   width: 77%;
//   height: 1500px;
//   padding: 20px;
//   background: #f7f8fa;
//   margin-left: 10%;
//   margin-right: 10%;
//   margin-bottom: 500px;
//   margin-top: -140px;
//   border: 1px solid #f2f2f2;
// }

.harder-setbg {
  width: 100%;
  height: 336px;
  background-repeat: no-repeat;
  background-image: url(~@/assets/img/consulting_bg.png);
  background-size: cover;
  color: white;
}

.harder-text1 {
  padding-left: 30px;
  padding-top: 30px;
  padding-right: 10px;
  color: white;
  font-size: 18px;
}

.harder-text2 {
  padding-left: 8px;
  padding-right: 8px;
  color: white;
  font-size: 14px;
  border: 1px solid #fff;
  border-radius: 10px;
}

.harder-right {
  float: right;
  padding-right: 100px;
  padding-top: -40px;
}

</style>
